<template>
  <div style="height: 635px; width: 100%" class="flex-row-center-center">
    <div class="flex-row-center-center" style="width: 41.08%">
      <div style="width: 100%">
        <div class="add-data-title flex-row-center-center">库区数据新增</div>
        <div>
          <div class="flex-row-start-center" style="margin-top: 37px">
            <div class="add-data-unit-title">库区名称</div>
            <Input
              class="add-data-unit-value"
              v-model="kqName"
              @on-blur="updateKqId"
              size="large"
            />
          </div>
          <div class="flex-row-start-center" style="margin-top: 37px">
            <div class="add-data-unit-title">库区编号</div>
            <Input class="add-data-unit-value" v-model="kqId" size="large" />
          </div>
          <div class="flex-row-start-center" style="margin-top: 37px">
            <div class="add-data-unit-title">库区面积</div>
            <Input class="add-data-unit-value" v-model="kqArea" size="large" />
          </div>
          <div class="flex-row-start-center" style="margin-top: 37px">
            <div class="add-data-unit-title">库区初始状态</div>
            <Input class="add-data-unit-value" v-model="kqState" size="large" />
          </div>
          <div class="flex-row-start-center" style="margin-top: 37px">
            <div class="add-data-unit-title">启用时间</div>
            <DatePicker
            type="date"
            placeholder="启用时间"
            v-model="startTime"
            format="yyyy-MM-dd"
            @onChange="changeUpdateTime"
            size="large"
            class="add-data-unit-value" 
          ></DatePicker>
          </div>

          <div class="flex-row-start-center" style="margin-top: 37px">
            <div class="add-data-unit-title"></div>
            <Button class="add-data-button" @click="addData">新增</Button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import vPinyin from "@/script/vue-py.js";
export default {
  data() {
    return {
      kqName: "",
      kqId: "",
      kqArea: "",
      kqState: "",
      startTime: "",
      suoxie: "",
      id:1
    };
  },
  props: {
    kqInfoList:Array
  },
  watch(){
    this.id= this.kqInfoList.length +1
  },
  computed: {
    systemTime() {
      return this.$store.state.systemTime;
    },
    curDate(){
      return this.$store.state.curDate;
    }
  },
  methods: {
    changeUpdateTime(val){
      this.startTime = val
    },
    addData() {
      if (this.kqName != "") {
        let param = {};
        param.kqName = this.kqName;
        param.kqId = this.kqId;
        param.kqState = this.kqState;
        param.kqArea = this.kqArea;
        param.startTime = this.startTime;
        this.$axios({
          url: "/addOneKqInfo",
          type: "post",
          params: param,
        }).then((res) => {
           alert("添加成功")
           this.kqId = ""
           this.kqName = ""
           this.kqArea = ""
           this.kqState = ""
           this.startTime = ""
           this.id++
        }).catch((error)=>{});
      } else {
        alert("库区名称不能为空");
      }
    },
    updateKqId() {
      let pinyin = vPinyin.chineseToPinYin(this.kqName);
      let SX = "";
      for (let i = 0; i < pinyin.length; i++) {
        var c = pinyin.charAt(i);
        if (/^[A-Z]+$/.test(c)) {
          SX += c;
        }
      }
      this.suoXie = SX;
      let ids = this.id;
      if (ids < 10) {
        ids = "0" + ids;
      }
      this.kqId = SX + ids;
      this.kqState = "正常";
      this.startTime = this.curDate;
      this.kqArea = "0"
    },
  },
};
</script>
<style scoped>
.test-style {
  color: black;
  font-size: 18px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
  width: calc(15.6% - 20px);
  margin-left: 10px;
  margin-right: 10px;
}
.add-data-title {
  height: 92px;
  background-color: rgba(204, 0, 0, 0.12);
  color: black;
  font-size: 36px;
  text-align: center;
  font-family: Roboto;
}
.add-data-unit-title {
  width: 30%;
  color: black;
  font-size: 20px;
  text-align: center;
  font-family: Roboto;
}
.add-data-unit-value {
  width: 70%;
  height: 34px;
}
.add-data-button {
  width: 170px;
  height: 47px;
  border-radius: 4px;
  background-color: #f1f1f1;
  color: black;
  font-size: 20px;
  text-align: center;
  font-family: Microsoft Yahei;
  border: 1px solid  rgba(187, 187, 187, 1);
}
</style>